<template>
  <div class="box">
    <el-card class="leftcard">
      <el-timeline :reverse="reverse">
        <template v-for="(activity, index) in leftListData">
          <el-timeline-item class="contentbox">
            <div
              class="leftbox"
              style="margin-bottom: 20px; position: relative"
              @click="getRightList(activity)"
            >
              <div class="top">
                <p>{{ activity.flowTitle }}</p>
                <p>
                  {{
                    activity.status == 0
                      ? "未完成"
                      : activity.status == 1
                      ? "已完成"
                      : "待激活"
                  }}
                </p>
              </div>
              <span style="font-size: 13px; padding-left: 6px"
                >办理单位｜{{ activity.handlingUnit }}</span
              >
              <div class="time">
                <p>计划完成时间:{{ activity.plannedTime }}</p>
              </div>
              <el-progress
                :percentage="activity.schedule"
                style="width: 300px; padding-left: 6px"
                :color="customColor"
              ></el-progress>
              <img
                src="@/assets/images/u123.svg"
                alt=""
                v-if="activity.children.length > 0"
                style="position: absolute; right: 14px; top: 54px"
                @click="activity.showIont = !activity.showIont"
              />
            </div>
            <!-- <template slot="dot"></template> -->
          </el-timeline-item>
          <el-timeline-item
            class="contentbox"
            v-if="activity.children.length > 0"
            v-show="activity.showIont"
            v-for="(item, index) in activity.children"
          >
            <div
              class="leftbox"
              style="margin-bottom: 20px; margin-left: 80px"
              @click="getRightList(item)"
            >
              <!-- @click="showDetails = !showDetails" -->
              <div class="top">
                <p>{{ item.flowTitle }}</p>
                <p>
                  {{
                    item.status == 0
                      ? "未完成"
                      : item.status == 1
                      ? "已完成"
                      : "待激活"
                  }}
                </p>
              </div>
              <span style="font-size: 13px; padding-left: 6px"
                >办理单位｜{{ item.handlingUnit }}</span
              >
              <div class="time">
                <p>计划完成时间:{{ item.plannedTime }}</p>
              </div>
              <el-progress
                :percentage="item.schedule"
                style="width: 300px; padding-left: 6px"
                :color="customColor"
              ></el-progress>
            </div>
            <!-- <template slot="dot"></template> -->
          </el-timeline-item>
        </template>
      </el-timeline>
    </el-card>
    <el-card class="rightcard">
      <div v-if="showDetails">
        <div
          slot="header"
          style="display: flex; justify-content: space-between"
        >
          <span>立项批复信息</span>
          <el-button style="float: right; padding: 3px 0" type="text"
            >待上传</el-button
          >
          <div class="img">
            <img src="@/assets/images/u87.svg" alt="" @click="imgu87" />
            <img src="@/assets/images/u86.svg" alt="" />
            <img src="@/assets/images/u88.svg" alt="" />
            <img src="@/assets/images/u89.svg" alt="" />
          </div>
        </div>
        <div class="text" v-for="item in rightListData" :key="item.taskId">
          <div class="item">
            <p>{{ item.taskName }}</p>
            <!-- <p>{{ item.taskName }}（完成占比{{ item.taskSchedule }}%）</p> -->
            <p>- -</p>
          </div>
        </div>

        <div class="text">
          <div class="item1">
            <p>
              说明：所欲信息填写完毕，经管理员查看文件格式是否合规，如果合规自动激活下一步流程
            </p>
          </div>
        </div>
      </div>
    </el-card>
    <div>
      <el-dialog
        title="立项批复"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        :show-close="false"
      >
        <el-form :inline="true">
          <el-form-item :label="item.taskName" v-for="item in formTabelItem">
            <el-input
              :placeholder="'输入' + item.taskName"
              v-model="item.taskValue"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="立项申报公司">
            <el-input placeholder="输入立项申报公司"></el-input>
          </el-form-item>
          <el-form-item label="公司统一信用代码">
            <el-input placeholder="输入公司统一信用代码"></el-input>
          </el-form-item>
          <el-form-item label="立项批复投资金额（万元）">
            <el-input placeholder="输入立项批复投资金额（万元）"></el-input>
          </el-form-item>
          <el-form-item label="立项批复时间">
            <el-input placeholder="输入立项批复时间"></el-input>
          </el-form-item>
          <el-form-item label="立项批复文号">
            <el-input placeholder="输入立项批复文号"></el-input>
          </el-form-item>
          <el-form-item label="可行性研究报告文件编号">
            <el-input placeholder="输入可行性研究报告文件编号"></el-input>
          </el-form-item>
          <el-form-item label="项目建议书或产业政策文件编号">
            <el-input placeholder="输入项目建议书或产业政策文件编号"></el-input>
          </el-form-item> -->
        </el-form>
        <div class="upload">
          <div
            :style="{
              marginLeft: (index + 1) % 2 === 0 ? '20px' : '20px',
              marginRight: (index + 1) % 2 === 0 ? '15px' : '0px',
            }"
            v-for="(item, index) in formTabelFile"
          >
            <p>{{ item.taskName }}</p>
            <upload :object="item" />
          </div>
          <!-- <div style="margin-left: 20px; margin-right: 24px">
            <p>营业执照</p>
            <upload />
          </div>
          <div>
            <p>立项批复文件</p>
            <upload />
          </div>
          <div style="margin-left: 20px; margin-right: 24px">
            <p>项目建议书或产业政策文件</p>
            <upload />
          </div>
          <div>
            <p>可行性研究报告</p>
            <upload />
          </div> -->
        </div>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleConfirm">提交</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import upload from "./upload.vue";
import {
  getCollaborativeHallList,
  getCollaborativeTaskList,
  setCollaborativeTaskList,
} from "@/api/collaborativeManagement/index.js";
export default {
  components: {
    upload,
  },
  props: {
    id: {
      type: Number,
    },
  },
  data() {
    return {
      reverse: false,
      activities: [
        {
          content: "活动按期开始",
          timestamp: "2018-04-15",
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13",
        },
        {
          content: "创建成功",
          timestamp: "2018-04-11",
        },
      ],
      customColor: "#9f94f7",
      showIont: false,
      dialogVisible: false,
      showDetails: true,
      leftListData: [],
      rightListData: [],
      formTabelItem: [],
      formTabelFile: [],
    };
  },
  mounted() {
    this.getLeftList();
  },
  methods: {
    //展开
    imgClick() {
      // console.log(111);
      this.showIont = !this.showIont;
    },
    //打开弹出框
    imgu87() {
      console.log(111);
      this.formTabelFile = this.rightListData.filter((ele) => {
        return ele.fileShow != null;
      });
      this.formTabelItem = this.rightListData.filter((ele) => {
        return ele.fileShow == null;
      });

      this.dialogVisible = true;
    },
    //提交
    handleConfirm() {
      let arr = [...this.formTabelFile, ...this.formTabelItem];
      setCollaborativeTaskList(arr).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "提交成功",
          });
          this.dialogVisible = false;
        }
      });
    },
    //弹出框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //获取左侧流程列表
    getLeftList() {
      setTimeout(() => {
        console.log(this.id, "id");
        let obj = {
          orderByColumn: "flow_order",
          isAsc: "asc",
          projectId: this.id.toString(),
        };
        console.log(obj, "obj");
        getCollaborativeHallList(obj).then((res) => {
          if (res.code == 200) {
            this.leftListData = res.data;
            this.leftListData.map((ele) => {
              ele["showIont"] = false;
            });
          }
        });
      }, 300);
    },
    //获取右侧列表
    getRightList(item) {
      getCollaborativeTaskList({ synergyFlowId: item.synergyFlowId }).then(
        (res) => {
          if (res.code == 200) {
            this.rightListData = res.rows;
          }
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  display: flex;

  .leftcard {
    width: 520px;
    height: 943px;

    ::v-deep .el-card__body {
      display: flex;
      margin-top: 12px;
      width: 502px;
      height: 917px;
      overflow: auto;

      .el-timeline {
        width: 10px;
        margin-left: -40px;
      }

      .contentbox {
        .leftbox {
          width: 326px;
          height: 120px;
          margin-left: 24px;
          border-radius: 10px;
          font-weight: 400;
          font-size: 14px;
          border-style: solid;
          border-color: rgb(159 148 247 / 90%);

          .top {
            height: 32px;
            background: rgb(159 148 247 / 90%);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            font-weight: 400;
            color: #000000;
            padding: 6px;
            margin-bottom: 6px;
          }

          .time {
            display: flex;
            color: #aaaaaa;
            font-size: 13px;
            padding: 6px;
            height: 34px;
          }
        }
      }
    }
  }

  .rightcard {
    flex: 1;
    position: relative;

    span {
      color: #333333;
      font-size: 18px;
      font-weight: 650;
      margin-right: 10px;
    }

    .el-button {
      width: 74px;
      height: 26px;
      border-radius: 5px;
      background: rgba(245, 35, 73, 1);
      color: #ffffff;
      font-weight: 400;
      font-size: 16px;
      position: absolute;
      left: 140px;
    }

    .img {
      width: 128px;
      display: flex;
      justify-content: space-between;
    }

    .text {
      .item {
        display: flex;
        justify-content: space-between;
        font-weight: 500;
        font-size: 18px;
        color: #333333;
        border-bottom: 1px solid #afafaf;
      }

      .item1 {
        font-weight: 400;
        font-size: 13px;
        color: #333333;
      }
    }
  }

  ::v-deep .el-dialog {
    width: 730px;
    height: 800px;
    display: grid;
    background-color: #f6f9fb;
    border-radius: 20px;

    .el-dialog__title {
      font-weight: 650;
      font-size: 20px;
      display: flex;
      justify-content: center;
    }

    .el-dialog__body {
      overflow: auto;
      height: 700px;
      margin-left: 10px;
    }

    .dialog-footer {
      > button:nth-of-type(1) {
        // width: 633px;
        width: 630px;
        height: 54px;
        border-radius: 10px;
        margin-top: 30px;
        // margin-left: 10px;
        margin-left: 20px;
      }

      > button:nth-of-type(2) {
        position: absolute;
        width: 83px;
        height: 36px;
        border-radius: 10px;
        right: 20px;
        bottom: 750px;
      }
    }

    .el-form {
      margin-left: 20px;
      margin-top: -20px;

      .el-form-item__label {
        margin-left: 8px;
        margin-top: -10px;
      }

      .el-form-item {
        width: 310px;

        .el-input__inner {
          width: 300px;
          height: 44px;
          border-radius: 10px;
        }
      }
    }

    .upload {
      display: flex;
      width: 666px;
      flex-wrap: wrap;
      margin-top: -20px;
    }
  }
}
</style>
